今天要來將之前編寫的Electron應用程式實際執行，以及介紹如何打包Electron應用程式。

• 執行start腳本：

  pm start
  ``
  
  

• 這次就可以看到Electron應用程式的視窗成功創建出來並顯示。
  

  • 如同index.html的設計，標題列及內容第一列為Hello World!。
  • 而Node.js、Chromium及Electron的版本號則是透過preload.js讀取Node.js環境並插入至index.html。

• 如果需要使用開發者工具，需要在main.js中的createWindow()增加下面程式碼：

  / Open the DevTools.
  ainWindow.webContents.openDevTools()
  ``
  
  

• 再次執行start腳本，可以看到開發者工具預設會開啟在Electron應用程式視窗的右邊。
  

  • 開發者工具可以檢視HTML檔的元素或是打開主控台，協助我們偵錯。

如此一來Electron應用程式就編寫成功了。在編寫完成之後，我們可以將Electron應用程式進行打包並發佈，讓應用程式可以被其他使用者使用，這裡我們採用官方建議的Electron Forge來進行打包。

• 首先安裝Electron Forge：

  pm install --save-dev @electron-forge/cli
  px electron-forge import
  ``
  
  

• 安裝成功會顯示輸出如下：
  

• 然後開啟package.json會看到新增了數個Electron Forge的腳本：

  scripts": {
  "start": "electron-forge start",
  "test": "echo \"Error: no test specified\" && exit 1",
  "package": "electron-forge package",
  "make": "electron-forge make"
  ,
  ``
  
  

• devDependencies中也新增了數個與Electron Forge有關的套件。

  devDependencies": {
  "@electron-forge/cli": "^6.4.2",
  "@electron-forge/maker-deb": "^6.4.2",
  "@electron-forge/maker-rpm": "^6.4.2",
  "@electron-forge/maker-squirrel": "^6.4.2",
  "@electron-forge/maker-zip": "^6.4.2",
  "@electron-forge/plugin-auto-unpack-natives": "^6.4.2",
  "electron": "^26.3.0"
  ,
  ``
  
  

• 另外在根目錄下也出現了forge.config.js，Electron Forge的設定檔。

  odule.exports = {
  packagerConfig: {
  	asar: true,
  },
  rebuildConfig: {},
  makers: [
  	{
  		name: '@electron-forge/maker-squirrel',
  		config: {},
  	},
  	{
  		name: '@electron-forge/maker-zip',
  		platforms: ['darwin'],
  	},
  	{
  		name: '@electron-forge/maker-deb',
  		config: {},
  	},
  	{
  		name: '@electron-forge/maker-rpm',
  		config: {},
  	},
  ],
  plugins: [
  	{
  		name: '@electron-forge/plugin-auto-unpack-natives',
  		config: {},
  	},
  ],
  ;
  ``
  
  

• 要打包Electron應用程式，需要執行剛剛新增的make腳本：

  pm run make
  ``
  
  

• 若make腳本執行成功會顯示下面輸出：
  

  • make腳本會分成兩部分執行：
    • 首先會執行electron-forge package，將所有的程式碼及Electron應用程式執行檔打包到資料夾內。
    • 再來根據forge.config.js中makers的設定，使用上方打包好的資料夾建立不同的轉發方式，如zip或是Squirrel.Windows安裝套件。

• 最終結果會輸出在out資料夾內：

  • 打包完成的資料夾。
    
  • Squirrel.Windows安裝套件。
    

今天實際執行了Electron應用程式，並且將Electron應用程式打包並建立轉發方式，之後就可以進行開發使用驅動程式及動態連結函庫的Electron應用程式了。

參考內容

Electron
Electron Forge
Squirrel.Windows